{% extends 'blog/base.html' %} 
{% load static %}
{% load blog_extras %}

{% block cate-title%}
<title> {{name}}| 阿凌的猫爬架</title>
{% endblock cate-title%}

{% block load-src %}
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1962070_9o8c1iysrsu.css">
    <link rel="stylesheet" href="{% static 'blog/css/extraClass.css'%}">
    <link rel="stylesheet" href="{% static 'blog/highlight/styles/github.css'%}">
    <link rel="stylesheet" href="{% static 'blog/css/_categories.css'%}" id="_categories-css">

    <script type="text/javascript" src="{% static 'blog/js/jquery.js'%}"></script>
    <script type="text/javascript" src="{% static 'blog/js/iconfont.js'%}"></script>
    <script type="text/javascript" src="{% static 'blog/js/detail.js'%}"></script>
{% endblock load-src %}    

{% block acticle-style %}
<style>
.icon {
    width: 1.5em; 
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    position: absolute;
    left: 0px ;
    top: 10px ;
    font-size: 20px ;
    cursor: pointer;
}
</style>

{% endblock acticle-style %}

{% block meta %}
    <div class="acticle-pic" style="background-image: url('https://s1.ax1x.com/2020/08/07/afx9N4.md.png');">
    </div>
{% endblock meta %}

{% block acticle-title %}
    <div class="extra-box">
        <div class="acticle-title">且莫思身外，长近尊前。
            <div class="roteZInf5S">
                <svg class="icon icon-sakura-flower" aria-hidden="true">
                    <use xlink:href="#icon-sakura-flower"></use>
                </svg>
            </div>
        </div>
        <ul class="acticle-nav">
            <div class="roteZInf5S">
                <svg class="icon icon-sakura-flower" aria-hidden="true">
                    <use xlink:href="#icon-sakura-flower"></use>
                </svg>
            </div>
            {% for date in date_list %}
            <li>
                <a href="#{{ date.year }}-{{ date.month }}">{{ date.year }} 年 {{ date.month }} 月</a>
            </li>
            {% endfor %}
        </ul>
    </div>
{% endblock acticle-title %}

{% block article %}
    {% for post in post_list %}
    <div class="article-box">
        <p class="post-meta">
            -POST: <span class="post-time">{{ post.created_time }}</span>
            <i class="iconfont icon-icon-"></i> 
            <a class="post-cate" href="{% url 'blog:category' post.category.name %}" target="_blank">
                {{ post.category.name }}
            </a>
            <i class="iconfont icon-biaoqian"></i> 
                {% for tag in post.tags.all %}
                    <a class="post-cate" href="{% url 'blog:tag' tag.name %}" target="_blank">
                        {{tag.name}}
                    </a>
                {% endfor %}
        </p>
        <a href="{{ post.get_absolute_url }}" class="article-title">{{ post.title }}</a>
        <div class="box-background"></div>
        <div class="box-main">
            <p>{{ post.excerpt }}</p>
        </div>
    </div>
    {% endfor %}
{% endblock article %}